<template>
  <div class="Recommend">
    <div class="Top">
      <img :src="userInfo.avatarUrl" alt="" />
      <div class="right">
        <p>每日推荐歌曲</p>
        <p>根据您的口味生成，每日8:00更新</p>
      </div>
    </div>
    <MyButton :list="data"></MyButton>
    <Table :tableData="data"></Table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Table from '@/components/table/Table';
import MyButton from '@/components/mybutton/MyButton';

export default {
  data() {
    return {
      data: [],
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  components: { Table, MyButton },
  created() {
    this.getRecommend();
  },
  methods: {
    async getRecommend() {
      const { data } = await this.$request('/recommend/songs');
      this.data = data.dailySongs;
    },
  },
};
</script>

<style scoped='scoped' lang='scss'>
.Recommend {
  .Top {
    display: flex;
    border-bottom: solid 1px $grayHover;
    margin-bottom: 10px;
    padding-bottom: 10px;
    img {
      @include image(100px, 10px);
      vertical-align: middle;
      margin-right: 15px;
    }
    .right {
      :first-child {
        color: #2c3e50;
        font-weight: 600;
        font-size: 20px;
      }
      :last-child {
        font-size: 13px;
        color: #606266;
      }
    }
  }
}
</style>